<script setup lang="ts">
 const msg = "Hello World"
 const count = 10
 const price = 2.5
 const isMarry: boolean = false
 const money = 0 // 存款
 const age = 20
 const skills = "写代码"

 // 声明函数
 const getContent = () => {
   return "老高讲V3"
 }
// 定义一个点击的函数
const clickFn = (a: number,b: number,c: number) => {
  alert("点我干嘛" + a)
}
const changeValue = (event: InputEvent) => {
  console.log("值改变了", event.target?.value)
}
const enterClick = (event: InputEvent) => {
  if(event.key === "Enter") {
    alert("您点击了回车")
  }
}
</script>

<template>
   <div class="container">
    <!-- 插值表达式 -->
   {{ (msg + "Vue3").split("").reverse().join("") }}
   <p>总价：{{ count * price }}</p>
   <p>年龄：{{ `${age}岁` }}</p>
   <p>婚姻状态: {{ isMarry ? "已婚" : "未婚" }}</p>
   <p>存款状态: {{ money || "穷光蛋"  }}</p>
   <p>技能：{{ skills  }}</p>
   <p>函数调用: {{ getContent() }} </p>
   <p>1 + 2 {{ 1 + 2 }}</p>

   <button v-on:click="clickFn(1,2,3)">测试</button>
   <!-- 完整写法v-on:事件名="方法名" -->
   <!-- 语法糖的写法 @click -->
   <button @click="clickFn(1,2,3)">测试</button>
   <!-- change/input -->
   <input type="text" @change="changeValue" @keydown="enterClick" >
   </div>
  
</template>

<style scoped>
.container {
  font-size: 30px;
  font-weight: bolder;
  color: brown
}

</style>
